<template>


  <div class="" style= "width: 800px">

 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" style="width: 300px;margin:auto">
   <el-form-item label="标题">
     <el-input v-model="ruleForm.title"></el-input>
   </el-form-item>
   <el-form-item label="作者">
     <el-input v-model="ruleForm.author"></el-input>
   </el-form-item>
   <el-form-item label="时间">
     <el-input type="date" v-model="ruleForm.time"></el-input>
   </el-form-item>
 </el-form>



    <!-- 富文本编辑器, 容器 -->
    <div id="J_quillEditor" style="height: 300px"></div>

    <button @click="btn">保存</button>
  </div>
</template>

<script>
import Quill from "quill";              //引入模块
import 'quill/dist/quill.snow.css'      //引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.bubble.css'
import axios from "axios";

export default {
  name: "earth",
  data() {
    return {
      ruleForm:{
        title:"",
        author:"",
        time:"",
      },
      reason : '',
      quillEditor: null,
      quillEditorToolbarOptions: [
        ["bold", "italic", "underline", "strike"],
        ["blockquote", "code-block", "image"],
        [
          {
            header: 1,
          },
          {
            header: 2,
          },
        ],
        [
          {
            list: "ordered",
          },
          {
            list: "bullet",
          },
        ],
        [
          {
            script: "sub",
          },
          {
            script: "super",
          },
        ],
        [
          {
            indent: "-1",
          },
          {
            indent: "+1",
          },
        ],
        [
          {
            direction: "rtl",
          },
        ],
        [
          {
            size: ["small", false, "large", "huge"],
          },
        ],
        [
          {
            header: [1, 2, 3, 4, 5, 6, false],
          },
        ],
        [
          {
            color: [],
          },
          {
            background: [],
          },
        ],
        [
          {
            font: [],
          },
        ],
        [
          {
            align: [],
          },
        ],
        ["clean"],
      ],
    }
  },
  mounted(){
    this.quillEditorHandle();
  },
  methods: {
    // 富文本编辑器
    quillEditorHandle() {
      this.quillEditor = new Quill("#J_quillEditor", {
        modules: {
          toolbar: this.quillEditorToolbarOptions,
        },
        theme: "snow",
      });
      // 自定义上传图片功能 (使用element upload组件)
      this.quillEditor.getModule("toolbar").addHandler("image", () => {
        // 自定义上传图片事件
        console.log('点击上传图片触发')
      });

      // 监听内容变化，动态赋值
      this.quillEditor.on("text-change", () => {
        this.reason = this.quillEditor.root.innerHTML;
      });
    },

//获取的内容值
    btn(){
      let param=new URLSearchParams;
      param.append("title",this.ruleForm.title)
      param.append("author",this.ruleForm.author)
      param.append("createDate",this.ruleForm.time)
      param.append("info",this.reason)
      console.log(param)
      axios.post("/api/news/add",param).then(res=>{
        console.log(param)
      })

    }
  }
}
</script>

<style scoped>

</style>